import React, { useEffect, useState,Component } from 'react'
// 总结 当卸载组件的时候三个return都会执行 加载的时候三个都会执行不会执行return
// 当改变和count无关的时候 不带参数的时候会执行原始和return
// 当改变和count有关的时候 count和不带参数的会执行原始和return
function Page2() {
  const [count,setcount]=useState(0)
  const [count1,setcount1]=useState(0)
  useEffect(()=>{
    console.log('不带参数--mount');
    return ()=>{
      console.log('不带参数--unmount');
    }
  })
  useEffect(()=>{
    console.log('带[]--mount');
    return ()=>{
      console.log('带[]--unmount');
    }
  },[])
  useEffect(()=>{
    console.log('带count--mount');
    return ()=>{
      console.log('带count--unmount');
    }
  },[count])
  console.log('----------');
  return (
    <div>
      <h2>useEffect的使用</h2>
      <div>{count}</div>
      <button onClick={()=>{setcount(count+1)}}>1</button>
      <div>{count1}</div>
      <button onClick={()=>{setcount1(count1+1)}}>1</button>
    </div>
  )
}
class Ddddpage2 extends Component {
  componentDidUpdate(){
    console.log(23);
  }
  render() {
    return (
      <div>
        {/* <button onClick={()=>setCount()}></button> */}
      </div>
    )
  }
}
export default function PageQ2() {
  const [count,setcount]=useState(true)
  return (
    <div>
      {!count?'':<Page2></Page2>}
      <button onClick={()=>{setcount(!count)}}>组件的显示隐藏</button>
      <Ddddpage2></Ddddpage2>
    </div>
  )
}



